-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix options list input unfocus #12057
Fix options list input unfocus #12057
Conversation
Bump @eVoloshchak 🚀 |
22-10-24-18-04-44.mp4The keyboard isn't hiding on scroll Not sure what's the issue, the only change I did is to merge your changes into the latest changes from |
@eVoloshchak Yup I'll try it and merge the latest |
…s-list-input-unfocus
@eVoloshchak I just pulled the latest Android device VIDEO-2022-10-24-22-50-11.mp4Android simulator Screen.Recording.2022-10-24.at.22.52.17.mov |
Can confirm it's working for me, reviewing |
|
@@ -17,12 +17,16 @@ const propTypes = { | |||
/** Called when the user begins to drag the scroll view */ | |||
onScrollBeginDrag: PropTypes.func, | |||
|
|||
/** Called when the user start scrolling */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/** Callback executed on scroll */
src/components/OptionsList/index.js
Outdated
export default withWindowDimensions(OptionsList); | ||
export default withWindowDimensions(forwardRef((props, ref) => ( | ||
// eslint-disable-next-line react/jsx-props-no-spreading | ||
<OptionsList innerRef={ref} {...props} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's call it forwardedRef
so it's consistent with the rest of the app
src/components/OptionsList/index.js
Outdated
return ( | ||
<BaseOptionsList | ||
// eslint-disable-next-line react/jsx-props-no-spreading | ||
{..._.omit(this.props, 'innerRef')} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
do we need to omit the innerRef
?
Also please add some comments in |
@eVoloshchak Updated PR!
I guess we need to omit that |
Bump @eVoloshchak |
Co-authored-by: e_voloshchak <copyreading@gmail.com>
Github's // According to https://github.com/Expensify/App/issues/11801
// `keyboardDismissMode` is dismissing the keyboard when the list is scrolled programmatically.
// In this listener we will set `isUserScreenTouched` when the user is touching the screen
// and `isUserScreenTouched` will be used to decide whether the list was scrolled by the user
// or programmatically so that the keyboard would be dismissed only when it was scrolled by the user. |
@eVoloshchak Yeah you're right, I fix the comment thanks! |
retesting |
LGTM |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The code looks good! Just rename the functions and the variable to make them a bit clearer
Co-authored-by: Marco Chávez <marco@expensify.com>
Co-authored-by: Marco Chávez <marco@expensify.com>
Co-authored-by: Marco Chávez <marco@expensify.com>
@marcochavezf Updated! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thanks guys!
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
🚀 Deployed to staging by @marcochavezf in version: 1.2.23-0 🚀
|
🚀 Deployed to production by @Julesssss in version: 1.2.23-9 🚀
|
Details
The issue is on mWeb when we scroll the view programmatically, the keyboard is dismissed where the focus should stay on the input and the keyboard is stay open as the native app does. Creating a touch listener to define is scroll programmatically or from user drag scroll.
Fixed Issues
$ #11801
$ #11801 (comment)
Tests
QA Steps
PR Review Checklist
PR Author Checklist
### Fixed Issues
section aboveTests
sectionQA steps
sectiontoggleReport
and notonIconClick
)src/languages/*
filesWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)/** comment above it */
this
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)PR Reviewer Checklist
The reviewer will copy/paste it into a new comment and complete it after the author checklist is completed
### Fixed Issues
section aboveTests
sectionQA steps
sectiontoggleReport
and notonIconClick
).src/languages/*
filesWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
have been tested & I retested again)/** comment above it */
this
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Screenshots
Web
Fix.Input.Unfocus.Web.mov
Mobile Web - Chrome
Fix.Input.Unfocus.mWeb-Chrome.mov
Mobile Web - Safari
Fix.Input.Unfocus.mWeb-Safari.mov
Desktop
Fix.Input.Unfocus.Desktop.mov
iOS
Fix.Input.Unfocus.iOS.mov
Android
Fix.Input.Unfocus.Android.mov